/*
 * @Title: 时间轴模块
 * @Created by: gsjPC 
 */
<template>
	<scroll-view class="time-line-wrap"  scroll-y="true">
		<view style="display: flex;flex-direction: row;justify-content: space-between;"  @touchmove.stop.prevent>
			<view class="ssTop">
				<uni-icon type="search" size="20" color="#DBDBDB"></uni-icon>
				<input 
				type="text" 
				placeholder="请输入搜索内容"
				placeholder-style="color:#BCBCBC"/>
			</view>
			<view class="screen" @click="openScreen">
				<text>筛选</text>
				<image :style="{transform:(showScreen?'rotate(270deg)':'')}" src="/static/jiantou.png" mode=""></image>
			</view>
			<view v-if="showScreen"  class="screen-box">
				<text class="screen-label">选择城市</text>
				<view class="city-list">
					<view class="city-item" @click="cityIndex = index" :class="cityIndex == index?'city-item-ac':''" v-for="(item,index) in cityData" :key='index'>
						<text>{{item.city}}</text>
						<image v-if="cityIndex == index" src="/static/type-xz.png" mode=""></image>
					</view>
				</view>
				<text class="screen-label">选择时间段</text>
				<view class="se-time">
					<view class="time-box">
						开始时间
					</view>
					<text>至</text>
					<view class="time-box">
						结束时间
					</view>
				</view>
				<view class="screen-commit" @click="screenCommit">确  定</view>
			</view>
		</view>
		
		
		<view class="time-line">
			<view class="mask" v-if="showMask" @click="closeScreen()" @touchmove.stop.prevent></view>
			<!-- 时间轴 -->
			<view class="time-line-container" :class="addTypeClass">
				<!-- 时间轴内容块列表 -->
				<view class="time-line-list">
					
					<!-- 时间轴内容块 -->
					<view class="time-line-info" :key="ind" :class="[layoutClass(ind)]" :id="'timeline'+ind" v-for="(sjz,ind) of sjzList">
						
						<!-- 内容块内容 -->
						<view class="line-info-content" >
							
							<!-- 时间轴圆点 -->
							<view class="line-on-round" :style="{ opacity: current[ind]&&current[ind].is=='ok'?1:0}" :class="current[ind]&&current[ind].is=='ok'?comeani:''"></view>
							
							<view class="info-content-wrap" :style="{ opacity: current[ind]&&current[ind].is=='ok'?1:0}" :class="current[ind]&&current[ind].is=='ok'?comeani:''">
								<view class="sjzTit">{{sjz.tit}}</view>
								<view class="sjzTime">{{sjz.time}}</view>
								<!-- 拖动test -->
								<!-- <view class="dragBox">
									<drag-sorts :list="sjz.sjzConList" @change="onDragSortChange" ></drag-sorts>
								</view> -->
								 
									<view v-for="(sjzCon,index1) in sjz.sjzConList"  :key="index1" @tap="goRouteDetails(index,index1,sjzCon.buyStatus)">
										<view class="sjzPic"><image :src="sjzCon.pic"></image></view>
										<view style="display: flex;flex-direction: row;justify-content: space-between;">
											<view class="sjzName">{{sjzCon.name}}</view>
											<view class="xiaojiFr" :class="[sjzCon.buyStatus == 1 ? 'wxiaojiFr' : '']">{{sjzCon.buyStatus == 1 ? '去预定':'已付款'}}</view>
										</view>
										
									</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <drag-sorts :list="list" :props="props" @change="onDragSortChange" ></drag-sorts> -->
	</scroll-view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	import dragSorts from '@/components/drag-sorts'
	export default{
		components:{
			uniIcon,
			dragSorts
		},
		data(){
			return{
				cityIndex:0,
				cityData:[
					{
						city:"不限"
					},
					{
						city:"沈阳"
					},
					{
						city:"青海"
					},
					{
						city:"西安"
					}
				],
				 list: [
				        {
				          name: '标题1'
				        },
				        {
				          name: '标题2'
				        },
				        {
				          name: '标题3'
				        },],
				// 数据
				sjzList:[
					{
						tit:'沈阳三日游',
						time:'2019-09-08 至 10-10',
						sjzConList:[
							
							{
								pic:'/static/testglPic7.jpg',
								name:'沈阳故宫',
								buyStatus:1//假设1是未消费
							},
							{
								pic:'/static/testglPic5.jpg',
								name:'龙芯昂酒店',
								buyStatus:2 
							}
						]
						
					},
					{
						tit:'蜜月之旅',
						time:'2019-08-27 至 09-10',
						sjzConList:[
							{
								pic:'/static/testglPic.png',
								name:'沈阳故宫',
								buyStatus:2 
							},
							{
								pic:'/static/testglPic7.jpg',
								name:'沈阳故宫',
								buyStatus:1//假设1是未消费
							},
							{
								pic:'/static/testglPic5.jpg',
								name:'龙芯昂酒店',
								buyStatus:2 
							}
							
						]
						
					},
					{
						tit:'沈阳三日游',
						time:'2019-09-08 至 10-10',
						sjzConList:[
							{
								pic:'/static/testglPic7.jpg',
								name:'沈阳故宫',
								buyStatus:1
							},
							
						]
						
					},
					{
						tit:'蜜月之旅',
						time:'2019-08-27 至 09-10',
						sjzConList:[
							{
								pic:'/static/testglPic.png',
								name:'沈阳故宫',
								buyStatus:2 
							},
							{
								pic:'/static/testglPic7.jpg',
								name:'大帅府',
								buyStatus:1//假设1是未消费
							},
							
							
						]
						
					},
				],
				HEIGHT:0,//屏幕高度
				result:[],//监听的结果
				current:[],//当前在屏幕内的
				sum:0,//加载完成个数
				comeani:'come-ani',//入场动画
				isScroll:true,//是否加载动画
				showMask:false,
				showScreen:false,
				props:{
					name:'name',
					pic:'pic'
				}
			}
		},
		props:{
			location:{
				type:String,
				default:'center',
			},
		},
		computed:{
			addTypeClass(){
				let _class="";
				let arrType =["left","right","center"];
				if (arrType.indexOf(this.location)!==-1&&this.location!=='center') {
					_class+=this.location+"-time-line";
				}
				return _class;
			}
		},
		mounted() {
			 this.init();
		},
		methods:{
			screenCommit(){
				this.closeScreen()
			},
			openScreen(){
				this.showMask = true
				this.showScreen = true
				document.body.style.overflow = 'hidden'
			},
			closeScreen(){
				this.showMask = false
				this.showScreen = false
				document.body.style.overflow = 'scroll'
			},
			goRouteDetails(ind,ind1,buyStatus){
				if(buyStatus == 1){
					uni.navigateTo({
						url:'/pages/home/scenicSpot/spotDetail'
					})
				}if(buyStatus == 2){
					uni.navigateTo({
						url:'/pages/my/myOrder/orderDetails?orderDetails=1&axisInd=' + ind
					})
				}
			},
			init(){
				try {
					// 获取屏幕高度
					const res = uni.getSystemInfoSync();
					this.HEIGHT=res.screenHeight;
					// 添加标志位
					for(let i=0;i<this.sjzList.length;i++){
						this.current.push({tag:'timeline'+i,is:'no'});
					}	
					// 开始获取位置信息
					this.getScroll();		
				} catch (e) {
					// error
				}
				
			},
			loadani(){
				for(let i=0;i<this.result.length;i++){
					for(let j=0;j<this.result[i].info.length;j++){
						// 是否没加载动画
						if(this.current[j].is!='ok'){
							// 是否进入视野
							if(this.current[j].tag==this.result[i].info[j].tag &&
							   this.result[i].info[j].domTop+90<this.HEIGHT){
								// 加载动画
								this.current[j].is='ok';
								this.sum=j+1;
							}
						}
					}
					// 移除当前
					this.result.splice(i,1);
				}
				// 是否全部加载完成
				if(this.sum==this.sjzList.length){this.isScroll=false;}
			},
			async getScroll(){
				if(!this.isScroll){return;}
				let info=[];
				// 返回位置信息加入数组
				for(let i=0;i<this.sjzList.length;i++){
					await this.getNodeList('timeline'+i,i).then(res => {
						info.push(res);
					});
				}
				this.result.push({info:info});
				// 加载动画
				this.loadani();
			},
			getNodeList(id,i){
				// 获取位置信息并返回
				return new Promise(resolve=>{
					const query = uni.createSelectorQuery().in(this);
					query.select('#'+id).boundingClientRect(data => {
					  // console.log("得到布局位置信息" + JSON.stringify(data));
					  // console.log("节点离页面顶部的距离为" + data.top);
					  resolve({domInfo:data.height,domTop:data.top,tag:id})
					}).exec();
				});
			},
			// 添加动画
			layoutClass(ind){
				let _class="";
				if(this.location=='center'&&ind%2!=0){
					_class='right-info';
				}
				return _class;
			},
			onDragSortChange(e){
				console.log(e);
			}
		},
	}
</script>

<style lang="scss">
	.mask{
		width: 100%;
		height: 100vh;
		position: absolute;
		z-index: 999;
		background: rgba(0,0,0,0.5)
	}
	.ssTop{
		width:600upx;
		height: 58upx;
		line-height: 58upx;
		display:flex;
		flex-direction: row;
		align-items: center;
		margin:24upx 20upx;
		padding:10upx;
		box-sizing: border-box;
		background-color: #F5F5F5;
	}
	.ssTop input{
		font-size: 28upx;
	}
	.screen{
		width: 100upx;
		height: 58upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		line-height: 58upx;
		margin:24upx 20upx;
	}
	.screen text{
		font-size: 28upx;
		
		line-height: 58upx
	}
	.screen image{
		width: 13upx;
		min-width: 12px;
		min-height: 12px;
		margin-top: 20upx;
		height: 21upx;
		transform: rotate(90deg)
	}
	.screen-box{
		width: 100%;
		height: 520upx;
		background: #ffffff;
		position: absolute;
		margin-top: 100upx;
		z-index: 1000
	}
	.screen-label{
		font-size: 30upx;
		display: block;
		color: rgba(51,51,51,1.00);
		margin-left: 30upx;
		margin-top: 47upx
	}
	
	
	.city-list{
		width: 700upx;
		margin-left: 25upx;
		margin-right: 25upx;
		margin-top: 26upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between
		
	}
	.city-item{
		width: 160upx;
		height: 58upx;
		border-radius: 20upx;
		text-align: center;
		line-height: 50upx;
		position: relative;
		color:rgba(51,51,51,1.00);
		border:rgba(220,220,220,1.00) solid 1upx
	}
	.city-item-ac{
		color:rgba(87,118,254,1.00);
		border:rgba(87,118,254,1.00) solid 1upx
	}
	.city-item text{
		font-size: 28upx;
		
	}
	.city-item image{
		width: 28upx;
		height: 26upx;
		position: absolute;
		z-index: 2000;
		right: 0;
		bottom: 0;
	}
	
	.se-time{
		width: 700upx;
		height: 57upx;
		margin: 26upx 25upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between
	}
	.time-box{
		width: 300upx;
		height: 57upx;
		border: rgba(220,220,220,1.00) solid 1upx;
		border-radius: 20upx;
		text-align: center;
		line-height: 56upx;
		font-size: 28upx;
		
	}
	.se-time text{
		font-size: 28upx;
		line-height: 56upx;
	}
	
	.screen-commit{
		width: 680upx;
		height: 80upx;
		border-radius: 20upx;
		color: #ffffff;
		text-align: center;
		line-height: 80upx;
		margin: 65upx 35upx;
		font-size: 28upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
	}
	
	
	
	
	
	.time-line-wrap{
		height: 100%;
		width: 100%;
		overflow-x: hidden;
	}
	.time-line-wrap{
		font-family: sans-serif;
		.time-line{
			padding: 4% 1%;
			
			// 中间的轴
			.time-line-container{
				padding: 0 2%;
				position: relative;
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					margin: 0 auto;
					height: 100%;
					width: 1px;
					border-right: 1upx dashed #BCE0FF;
				}
				.time-line-list{
					width: 100%;
					.time-line-info{	
						position: relative;
						.line-info-content{
							will-change: auto;
							width: 43%;
							display: flex;
							flex-direction: column;
							.line-on-round{
								height: 20upx;
								width: 20upx;
								border: 10upx solid #D2EAFF;
								border-radius: 50%;
								background: #A8D7FF;
								position: absolute;
								left: 0;
								right: 0;
								margin: 0 auto;
								top: 0px;
								z-index: 10;
								&.come-ani{
									animation: come-round .8s ease-in-out;
								}
							}
							.info-content-wrap{
								position: relative;
								
								&.come-ani{
									animation: come-in-left .6s ease-in-out;
								}		
							}
						}
					}
					.right-info{
						transform: rotateY(180deg);
					}
				}
			}
			
			// 轴在左边
			.left-time-line{
				&::before{
					margin: 0;
					left: 15px;
				}
				.time-line-list{
					.time-line-info{	
						.line-info-content{
							width: auto;
							.line-on-round{
								left: 0;
								margin: 0;
							}
							.info-content-wrap{
								margin-left: 45px;
								margin-bottom: 15px;
								&.come-ani{
									animation: come-in-right .6s ease-in-out;
								}
							}
						}
					}
				}
			}
			
			// 轴在右边
			.right-time-line{
				&::before{
					margin: 0;
					left: 92.8%;
				}
				.time-line-list{
					.time-line-info{	
						.line-info-content{
							width: auto;
							.line-on-round{
								left: 90%;
								margin: 0;
							}
							.info-content-wrap{
								margin-right: 55px;
								margin-bottom: 15px;
								.info-content{
									&::before{
										border-color: transparent transparent transparent #aaa;
									}
								}
								
							}
						}
					}
				}
			}
		}
	}
	.dragBox{
		margin-top: 24upx;
		width:300upx;
	}
	@keyframes come-in-left {
		0% {
			transform: translateX(-120%);
		}
		70% {
			transform: translateX(8%);
		}
		100% {
			transform: translateX(0);
		}
	}
	@keyframes come-in-right {
		0% {
			transform: translateX(120%);
		}
		70% {
			transform: translateX(-8%);
		}
		100% {
			transform: translateX(0);
		}
	}
	@keyframes come-round {
		0% {
			transform: scale(0);
			opacity: 0;
		}
		40% {
			opacity: 0;
		}
		60% {
			transform: scale(1.2);
		}
		100% {
			transform: scale(1);
		}
	}
.sjzTit{
		font-size: 28upx;
		color: #55A0FF;
		position: relative;
	}
	.sjzTime{
		color: #666666;
		font-size: 28upx;
	}
	.sjzPic image{
		width:300upx;
		height: 143upx;
		border-radius: 10upx;
		margin-top: 22upx;
	}
	.sjzName{
		color: #666666;
		font-size: 28upx
	}
	
	.timeLine{
		
	}
	
	.sjzTit image{
		width:46upx;
		height: 46upx;
		position: absolute;
		right: 0;
	}
	.right-info .sjzName,.right-info .sjzPic image, .right-info .sjzTit, .right-info .sjzTime,.right-info .wxiaojiFr,.right-info .xiaojiFr{
		transform: rotateY(180deg);
	}
	.xiaojiFr{
		font-size: 30upx;
		color:#55A0FF;
	}
	.wxiaojiFr{
		color: #ffffff;
		text-align: center;
		line-height: 46upx;
		border-radius: 30upx;
		width: 127upx;
		font-size: 28upx;
		height: 46upx;
		background: -webkit-linear-gradient(left, rgba(142,203,255,1.00),rgba(88,174,255,1.00));
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, rgba(142,203,255,1.00)F,rgba(88,174,255,1.00));
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, rgba(142,203,255,1.00),rgba(88,174,255,1.00));
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, rgba(142,203,255,1.00),rgba(88,174,255,1.00));
		/* 标准的语法 */
	}
</style>
